<template>
	<view class="content1">
<!--		<view class="mp-search-box">

			<view class="searchBox">
				<view class="inputBox" style="">
					<input class="ser-input" @click="navToSearch('/pages/search/search')" type="search"
						placeholder-class="ph" placeholder="关键字" @confirm="toSearch" />
				</view>
			</view>
		</view>-->
		<view class="content">
      <view class="rightBox">
        <view class="cateBox" :style="{display:lastList.length===0?'none':'block'}">
          <view class="cateTitle">
            <view class="cateTop">
              <!-- 分类栏 -->
              <repairs-top style="width:100%" :problemData="problemData" :deviceTypes="lastList" :selectId="selectId" :purchaserCatalogIds="purchaserCatalogIds" @stateActive="stateActive"
                           @sortActive="sortActive" @typeConfirm="typeConfirm"
                           @sendValueToParent="getValueFromChild"></repairs-top>
            </view>
          </view>
          <!-- 原来二级三级菜单 -->
          <!-- <view class="" style="height: 100%;">
            <scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
              <view v-for="item in curslist" :key="item.id"
              class="s-list" :id="'main-'+item.id" style="">
                <text class="s-item">{{item.name}}</text>
                <view class="t-list">
                  <view @click="navToList(item.id, titem.id)"
                  v-if="titem.parentId === item.id"
                  class="t-item" v-for="titem in tlist"
                   :key="titem.id">
                    <view>
                      <image :src="titem.h5Icon?titem.h5Icon:'../../static/error-img-115.png'"></image>
                      <view class="catalog-text">{{titem.name}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view> -->
        </view>
        <!-- 表头选择 -->

<!--        <view class="cateBoxTable">
          <view class="cate-item" :class="{current: selectValue === 0}" @click="tabClick(0)">
            <text>全部</text>
            <text>({{goodsLength}})</text>
          </view>
          <view class="cate-item" :class="{current: selectValue === 1}" @click="tabClick(1)">
            <text>综合</text>
          </view>
          <view class="cate-item" :class="{current: selectValue === 2}" @click="tabClick(2)">
            <text v-show="selectValue !== 2">销量&#8645;</text>
            <text v-show="!saleDown&&selectValue === 2">销量&#8593;</text>
            <text v-show="saleDown&&selectValue === 2">销量&#8595;</text>
          </view>
          <view class="cate-item" :class="{current: selectValue === 3}" @click="tabClick(3)">
            <text v-show="selectValue !== 3">价格&#8645;</text>
            <text v-show="!priceDown && selectValue === 3">价格&#8593;</text>
            <text v-show="priceDown && selectValue === 3">价格&#8595;</text>
          </view>

        </view>-->
        <view style="display: flex;height: 100%;margin-top: 0px;background-color: #E2E2E2;">
          <!-- 左边类目 -->
          <scroll-view scroll-y class="left-aside" style="background-color: #ffffff;">
            <view v-for="(item,index) in fatherList" :key="item.id" class="f-item" :class="{active: item.id === currentId}"
                  @click="tabtap(item,index)">
              {{item.name}}
            </view>
          </scroll-view>
          <!-- 商品列表 -->
          <scroll-view class="product-list" :scroll-into-view="toView" :style="{height:lastList.length===0?'calc(100%)':'calc(100%)'}" scroll-y :scroll-top="listScrollTop" @scroll="scroll"
                       @scrolltolower="scrollToBottom">
<!--            <view style="margin:4px;border-radius: 5px;padding:4px;background-color: #fff;" v-if="goodsList.length>0">
              <view style="height: 48px;line-height: 48px;display:flex;justify-content: space-between;width: 100%;border-bottom: 0.5px dashed #e2e2e2">
                <view style="color: #2b85e4;width: fit-content;"><text style="font-size: 20px;line-height: 40px;">&bull;</text><text style="margin-left: 5px;">{{goodsList[0].originGoodsName}}</text></view>
                <view style="flex:1;text-align: right;" @click="showMore">查看更多</view>
              </view>
              <view v-if="goodsList.length> 0" v-for="(item,index) in goodsList">
                <view style="font-size: 14px;font-weight: 600;margin-top: 8px;">{{item.originGoodsName}} {{item.configuration}}</view>
                <view>{{item.createTime}}</view>
                <view style="height: 36px;line-height: 36px;display: flex;border-bottom: 1px solid #e8e8e8;justify-content: space-between;" v-if="item.itemList&&item.itemList.length>0" v-for="(it,index2) in item.itemList">
                  <view style="display: flex;height: 36px;line-height: 36px;">
                    {{it.color}}
                    <view style="height: 28px;margin-left: 4px;margin-top: -2px;">
                      <text style="height: 28px;font-size: 8px;color: #fff;background-color: #df3325;border-radius: 3px;padding: 2px;" v-if="it.supplyDemand == 1">大量要</text>
                      <text style="height: 28px;font-size: 8px;color: #fff;background-color: #6C68FA;border-radius: 3px;padding: 2px;" v-if="it.supplyDemand == 2">需求少</text>
                    </view>
                  </view>
                  <view  style="display: flex;height: 36px;line-height: 36px;">
                    <view style="height: 36px;margin-right: 4px;">
&lt;!&ndash;                      upDownPrice 2 供需少 1 需求大&ndash;&gt;
&lt;!&ndash;                      <text v-if="it.upDownPrice > 0" style="height: 20px;color: #ff0000;font-size: 14px;background-color: #F3F3F3;border-radius: 3px;padding: 2px;" @click="showDetailMore(item,index,index2)">{{it.price}}</text>&ndash;&gt;
                      <view style="height: 24px;line-height: 1;margin-top: 6px;color: #000000;font-size: 14px;background-color: #F3F3F3;border-radius: 3px;padding: 6px;" @click="showDetailMore(item,index,index2)">
                        {{it.price}}
                      </view>
&lt;!&ndash;                      <text v-else-if="it.upDownPrice < 0" style="height: 20px;color: #4acd0f;font-size: 14px;background-color: #F3F3F3;border-radius: 3px;padding: 2px;" @click="showDetailMore(item,index,index2)">{{it.price}}</text>&ndash;&gt;
                    </view>
                    <view style="color:#D1D1D1;margin-left: 8px;margin-right: 4px;font-size: 12px">
                      <text v-if="it.upDownPrice > 0" style="color: #ff0000;">
                        {{it.upDownPrice}}
                        <u-icon name="arrow-up-fill" size="12" style="margin-left: 4px;"></u-icon>
                      </text>
                      <text v-else-if="it.upDownPrice == 0" style="color: #D1D1D1;">{{it.upDownPrice}}</text>
                      <view v-else-if="it.upDownPrice < 0" style="height: 20px;color: #4acd0f;display: flex;">
                        <text>{{Number(-it.upDownPrice)}}</text>
                        <u-icon name="arrow-down-fill" size="12" style="margin-top: 18px;margin-left: 4px;"></u-icon>
                      </view>

&lt;!&ndash;                      {{it.upDownPrice}}&ndash;&gt;
&lt;!&ndash;                      text-decoration: line-through; color: #D1D1D1;&ndash;&gt;
                    </view>
                  </view>
                </view>
              </view>
            </view>-->
            <view style="margin:4px;border-radius: 5px;padding:4px;background-color: #fff;" :id="'view'+inP" v-if="goodsListParent.length>0" v-for="(itP,inP) in goodsListParent">
              <view>
<!--                {{itP}}-->
              <view style="height: 48px;line-height: 48px;display:flex;justify-content: space-between;width: 100%;border-bottom: 0.5px dashed #e2e2e2">
                <view style="color: #2b85e4;width: fit-content;"><text style="font-size: 20px;line-height: 40px;">&bull;</text><text style="margin-left: 2px;">{{itP[0].originGoodsName}}</text></view>
                <view style="flex:1;text-align: right;" @click="showMore(itP,inP)">查看更多</view>
              </view>
              <view v-if="itP.length> 0" v-for="(item,index) in itP">
                <view style="font-size: 14px;font-weight: 600;margin-top: 8px;">{{item.originGoodsName}} {{item.configuration}}</view>
                <view>{{item.createTime}}</view>
                <view style="height: 36px;line-height: 36px;display: flex;border-bottom: 1px solid #e8e8e8;justify-content: space-between;" v-if="item.itemList&&item.itemList.length>0" v-for="(it,index2) in item.itemList">
                  <view style="display: flex;height: 36px;line-height: 36px;">
                    {{it.color}}
                    <view style="height: 28px;margin-left: 4px;margin-top: -2px;">
                      <text style="height: 28px;font-size: 8px;color: #fff;background-color: #df3325;border-radius: 3px;padding: 2px;" v-if="it.supplyDemand == 1">大量要</text>
                      <text style="height: 28px;font-size: 8px;color: #fff;background-color: #6C68FA;border-radius: 3px;padding: 2px;" v-if="it.supplyDemand == 2">需求少</text>
                    </view>
                  </view>
                  <view  style="display: flex;height: 36px;line-height: 36px;width: 100px;">
                    <view style="height: 36px;margin-right: 4px;">
                      <!--                      upDownPrice 2 供需少 1 需求大-->
                      <!--                      <text v-if="it.upDownPrice > 0" style="height: 20px;color: #ff0000;font-size: 14px;background-color: #F3F3F3;border-radius: 3px;padding: 2px;" @click="showDetailMore(item,index,index2)">{{it.price}}</text>-->
                      <view style="height: 24px;line-height: 1;margin-top: 6px;color: #000000;font-size: 14px;background-color: #F3F3F3;border-radius: 3px;padding: 6px;" @click="showDetailMore(itP,inP,item,index,index2)">
                        {{it.price}}
                      </view>
                      <!--                      <text v-else-if="it.upDownPrice < 0" style="height: 20px;color: #4acd0f;font-size: 14px;background-color: #F3F3F3;border-radius: 3px;padding: 2px;" @click="showDetailMore(item,index,index2)">{{it.price}}</text>-->
                    </view>
                    <view style="color:#D1D1D1;margin-left: 8px;margin-right: 4px;font-size: 12px">
                      <text v-if="it.upDownPrice > 0" style="color: #ff0000;">
                        {{it.upDownPrice}}
                        <u-icon name="arrow-up-fill" size="12" style="margin-left: 4px;"></u-icon>
                      </text>
                      <text v-else-if="it.upDownPrice == 0" style="color: #D1D1D1;">{{it.upDownPrice}}</text>
                      <view v-else-if="it.upDownPrice < 0" style="height: 20px;color: #4acd0f;display: flex;">
                        <text>{{Number(-it.upDownPrice)}}</text>
                        <u-icon name="arrow-down-fill" size="12" style="margin-top: 18px;margin-left: 4px;"></u-icon>
                      </view>

                      <!--                      {{it.upDownPrice}}-->
                      <!--                      text-decoration: line-through; color: #D1D1D1;-->
                    </view>
                  </view>
                </view>
              </view>
              </view>
            </view>
<!--            <view class="product-item" v-for="(item, index) in goodsList" :key="index"
                  @click="navToDetailPage(item)">
              <image class="left" :src="item.goodsImage" mode="aspectFit"></image>
              <view class="right">
                <text class="title more-t">{{item.goodsTip}}</text>
                <view class="money-box" v-if="hasLogin">
                  <text class="price">{{'￥'+item.goodsPrice}}</text>
                </view>
                <view class="money-box" v-else>
                  <text class="price" style="color: #fa436a;">******</text>
                </view>
                <view class="bottom" v-if="hasLogin">
                  <image src="../../static/cart.png" @click.stop="addCart(item)"></image>
                  &lt;!&ndash; <image v-else src="../../static/tab-cart.png" ></image> &ndash;&gt;
                </view>
              </view>
            </view>-->
            <uni-load-more :status="loadingType"></uni-load-more>
          </scroll-view>

        </view>

      </view>


      <u-popup v-model="supplierShow" mode="center" width="80%" height="60%" border-radius="20" closeable>
        <view style="padding: 30rpx;font-size: 16px;">
          <view style="color: black;font-size: 34rpx;text-align: center;font-weight: bold;">机型详情</view>
          <view style="align-items: center;padding: 40rpx;">
            <view style="color: #2b85e4;width: fit-content;"><text style="font-size: 22px;line-height: 40px;">&bull;</text><text style="margin-left: 2px;">{{originGoodsName}}</text></view>
            <view class="tab">
              <view v-for="(item,index) in goodNameList" :key="index" class="tab-item" :class="{current: goodNameIndex === index}"
                    @click="tabGoodListClick(index,item)">
                {{ item.name }}
              </view>
            </view>
            <view style="width: fit-content;">配置</view>
            <view class="tab">
              <view v-for="(item,index) in configurationList" :key="index" class="tab-item" :class="{current: goodListIndex === index}"
                    @click="tabGoodListClick2(index,item)">
                {{ item.name }}
              </view>
            </view>
            <view style="width: fit-content;">颜色</view>
            <view class="tab">
              <view v-for="(item,index) in colorAndPriceList" :key="index" class="tab-item" :class="{current: goodItemIndex === index}"
                    @click="tabGoodListClick3(index,item)">
                {{ item.color }}<text style="color:#ff0000;margin-left: 4px;">{{item.price}}</text>
              </view>
            </view>
<!--            <text style="width: 30%;">{{// supplierData.supplierContact}}</text>-->
<!--            <text class="yticon" style="margin: 0 10rpx;text-decoration: none;" @click="makePhoneCall(supplierData.supplierContactPhone)">-->
<!--              <uni-icons type="phone" size="18"></uni-icons>-->
<!--            </text>-->
<!--            <text style="flex: 1;">{{supplierData.supplierContactPhone}}</text>-->
<!--            <online-service v-if="supplierCustomerGroup.customerGroupId" @service="toOnlineService()"></online-service>-->
          </view>
        </view>
      </u-popup>
		</view>

	</view>
</template>

<script>
	import Cname from '@/components/min-collapse/min-collep.vue'
	import repairsTop from '@/components/tab-control/tab-control.vue';
	import {
		category
	} from '../../api/category/category.js';
	import {
		getClassGoodLists,
    getClassPageList,
    getOriginGoodsFindByClassifyId,
    getProtocolGoodsDetail,
    findByOriginGoodsId,
		getGoodsPriceAndAmount
	} from '@/api/product/list.js';
	import {
		addOneToCart,
	} from '../../api/footpath/footpath.js'
	import {
		mapState
	} from 'vuex';
	import {qryConfByItemCode} from '@/api/user/user.js'
	import {queryGoodsLowestPriceById} from '@/api/order/order.js'

	function touchmovePrevent(e) {
		e.preventDefault()
	}
	export default {
		components: {
			Cname,
			repairsTop,
		},
		data() {
			return {
        supplierShow: false,
        goodListIndex: 0,
        goodNameIndex: 0,
        goodItemIndex: 0,
        goodNameList: [],
        goodList: [],
				priceDown: true,
				saleDown:true,
				firstID: '',
				cartMsg: '',
				fatherList: [],
        goodSortId: '',
        activeGoodsIndex: 0,
				goodsLength: 0,
				lastList: [],
        selectId: '',
				selectedId: '',
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 1,
				currentIdList: [],
				flist: [],
				slist: [],
				tlist: [],
				curslist: [],
				curtlist: [],
				// 商品列表
				goodsList: [],
				goodsListParent: [],
        originGoodsName: '',
        configurationList: [],
        colorAndPriceList: [],
        colorAndPriceLists: [],
				goodsInfo: {},
				ccc: 'ccc',
				navList: [
					'热带水果1',
					'热带水果2',
					'热带水果3',
					'热带水果4',
					'热带水果5',

				],
				totalList: [],
				listScrollTop: 0,
        toView: '',
				loadingType: 'more', //加载更多状态
				selectValue: 0,
				tabtext: [{
						name: '全部',
						id: 1
					},
					{
						name: '综合',
						id: 2
					},
					{
						name: '销量',
						id: 3
					},
					{
						name: '价格',
						id: 4
					},
				],
				jumpCatalogIds: [],
				itemList: [{
						head: "分类",
						body: "<span>111</span>",
						open: false,
					},

				],
        purchaserCatalogIds: [], // 顶级目录id
				params: {
					brandIds: [],
					catalogIds: [],
					excludeTags: [],
					goodsName: '',
					isNeedSupplier: "true",
					isQueryCatalog: true,
					isStandard: -1,
					limit: 10,
					page: 1,
					priceMax: null,
					priceMin: null,
					purchaserCatalogIds: [],
					purchaserId: 1,
					searchData: [],
					searchName: "",
					searchType: "3",
					searchWords: '',
					sortType: 1,
					specList: [],
					supplierIds: [],
					supplierName: "",

				},
				problemData: [{
						name: "报修问题",
						value: 22
					},
					{
						name: "已解决问题",
						value: 22
					},
					{
						name: "未处理问题",
						value: 22
					}
				],
				// 顶部问题数量
				deviceType: [{
						name: '全部',
						select: false
					},
					{
						name: '电梯1',
						select: false
					},
					{
						name: '水泵房1',
						select: false
					},
					{
						name: '监控室1',
						select: false
					},
					{
						name: '消控室1',
						select: false
					},
					{
						name: '配电房1',
						select: false
					},
					{
						name: '其他1',
						select: false
					}
				], // 设备类型
				// 广州银行-校验商品最低价
				isbuyMinPrice:false
			}
		},
		onReady() {

		},
		onLoad(options) {
			console.log('options', options);
			// 模拟数据
			//一级菜单id
			// options.fid="1303588860499865601"
			//二级菜单id
			// options.sid="1303899172457472001"
			// //三级菜单id
			// options.tid="1303905592657633281"
			// fid:"1303588860499865601"
			// sid:"1303899172457472001"
			// tid:"1303905592657633281
			if (options.tid) {
				this.cateId = options.tid;
				this.params.searchType = '3'
			}
			// 搜索跳转
			if (options.key) {
				this.params.searchType = '1'
				this.params.searchWords = options.key
				this.params.goodsName = options.key
			}
			// this.loadCate(options.firstId);
			this.loadGoods()
			// this.getConf()
			// if (options.firstId) {
			// 	console.log('firstId',options.firstId);
			// 	console.log('firstId+++++++', this.fatherList)
			// }
			// this.initParams()

			// var handler = function(e) {
			// 	e.preventDefault()
			// }

			// window.onunload = function() {
			// 	console.log('unload')
			//this.loadData();
			// 进入默认一级目录
			// if(option.fid){
			// 	this.selectedId = option.fid;
			// }
		},
		onUnload() {
			console.log('unload')
		},
		onHide() {
			console.log('hide')
			// getElementsByClassName('pages-category-category')[0]
			// console.log(document.getElementsByClassName('pages-index-index')[0])
			// if (document.getElementsByClassName('pages-index-index')[0])
			// 	document.getElementsByClassName('pages-index-index')[0].removeEventListener('touchmove', touchmovePrevent,
			// 		false)
			// if (document.getElementsByClassName('pages-cart-cart')[0])
			// 	document.getElementsByClassName('pages-cart-cart')[0].removeEventListener('touchmove', touchmovePrevent,
			// 		false)
			// if (document.getElementsByClassName('pages-user-user')[0])
			// 	document.getElementsByClassName('pages-user-user')[0].removeEventListener('touchmove', touchmovePrevent,
			// 		false)
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			getConf(){
				const deptInfo = uni.getStorageSync('deptinfo')[0]
				qryConfByItemCode({code: "isbuyMinPrice",
					tenant_id: deptInfo.tenantId,
					dept_code: deptInfo.deptCode}).then(res=>{
						if(res.code===0){
							this.isbuyMinPrice = res.data.val == '1'
						}
				})
			},
			constructAreaParams(objs, nums, areaId, purchaserId, isqueryAmount, isqueryPrice) {
				var params = {};
				var paramsArr = [];
				var queryParams = {}; //查询参数
				queryParams.goods = [];
				let that = this;
				console.log(objs)
				// let pType;
				// // let qType;
				// if (item.goodsSourceType === 0) {
				// 	pType = '02';
				// 	qType = 1;
				// } else {
				// 	pType = '01';
				// 	qType = 2;
				// }
				// const good = {
				// 	protocolGoodsId: item.goodsId,
				// 	protocolId: item.protocolId,
				// 	protocolType: pType,
				// 	remainAmount: 1
				// }
				for (var i = 0; i < objs.length; i++) {
					var item = objs[i];
					// 苏宁商品
					/* if(item.goodsSourceType != 2) {
					  continue;
					} */
					paramsArr = [];
					params = {};
					if (item.goodsSourceType == 0) {
						item.protocolType = "02";
					} else {
						item.protocolType = "01";
					}
					queryParams.queryType = "2";
					if (nums == 0) {
						nums = item.num;
					}
					queryParams.goods.push({
						protocolGoodsId: item.goodsId,
						protocolId: item.protocolId,
						protocolType: item.protocolType,
						remainAmount: 1
					})
				}
				queryParams.areaId = areaId;
				queryParams.bizDeptId = purchaserId;
				queryParams.isqueryAmount = isqueryAmount;
				queryParams.isqueryPrice = isqueryPrice;
				return queryParams;
			},
			getGoodsAmount() {
				var areaId = uni.getStorageSync('areaId') ? uni.getStorageSync('areaId') : uni.getStorageSync(
					'enterpriseInfo').areaId;
				if (this.goodsList.length == 0 || !areaId) {
					return;
				}
				let queryParams = this.constructAreaParams(
					this.goodsList,
					1,
					areaId,
					uni.getStorageSync('deptinfo')[0].deptId,
					true,
					false
				);
				console.log(queryParams)
				getGoodsPriceAndAmount(queryParams).then(res => {
					let stocksArr = res.stocks;
					for (var i = 0; i < this.goodsList.length; i++) {
						let amoutObj = stocksArr.find(item => item.protocolGoodsId == this.goodsList[i]
							.goodsId);
						// console.log(amoutObj)
						if (amoutObj && amoutObj.hasOwnProperty("remainAmount")) {
							let remainAmount = amoutObj.remainAmount;
							if (remainAmount != -999 && remainAmount <= 0) {
								this.goodsList[i].remainAmount = 0;
							} else {
								this.goodsList[i].remainAmount = 1;
							}
						}
					//    console.log(this.goodsList)
					}
				})
			},

			//添购判断
			getRemain(val) {
				let remainAmount = val.remainAmount
				this.cartMsg = ''
				let status = false
				if (remainAmount == -999) {
					// this.isDisabled = false;
					// this.stockStatus = '有货';
					status = false
				} else if (remainAmount <= 0) {
					// this.isDisabled = true;
					// this.stockStatus = '库存不足';
					this.cartMsg = '商品库存不足';
					status = true
				} else if (remainAmount > 0 && remainAmount < 50) {
					status = false
				} else {
					// this.isDisabled = false;
					// this.stockStatus = stockStateDesc;
					status = false
				}
				return status
			},

			//加入购物车
			addCart(item,isMin = false) {
				console.log('item', item);

				// 校验最低价
				if(this.isbuyMinPrice&&!isMin){
					this.queryLowestPriceGoods(item)
					return
				}

				if (this.getRemain(item)) {
					this.$util.msg(this.cartMsg)
					return false
				}

				var areaId = uni.getStorageSync('areaId') ? uni.getStorageSync('areaId') : uni.getStorageSync(
					'enterpriseInfo').areaId;
				var data = {
					goodsId: item.goodsId,
					// areaId: uni.getStorageSync('areaId'),
					areaId: areaId,
					num: 1
				}
				addOneToCart(data).then(res => {
					if (res.code === 0) {
						this.$util.msg('加入购物车成功')
					} else {
						this.$util.msg(res.message)
					}
				})
			},
			// 校验最低价
			queryLowestPriceGoods(item){
				queryGoodsLowestPriceById({goodsId: item.goodsId,purchaserId: uni.getStorageSync('deptinfo')[0].deptId}).then(response=>{
					if(response.code === 0){
					  let res = response.data;
					  if(res.goodsId){
						  let lowestPrice = Number(res.goodsPrice)
						  if (lowestPrice < item.goodsPrice){
							//不是最低价商品，需要跳转到新商品
							uni.showModal({
								title:'温馨提示',
								content:'商城存在价格更低的同类商品',
								confirmText:'前往购买',
								showCancel:false,
								success(suc) {
									if(suc.confirm){
										uni.navigateTo({
											url:`/pages/product/product?id=${res.goodsId}`
										})
									}
								}
							})
						  } else {
							this.addCart(item,true)
						  }
					  } else {
							this.addCart(item,true)
					  }
					} else {
						this.addCart(item,true)
					}
				})
			},
			//获取子组件内容
			getValueFromChild(sendFotherValue) {
				console.log('子传递数组', sendFotherValue)
        this.selectId = sendFotherValue[0]
        this.currentIdList = []
        this.goodsListParent = []
        this.loadGoodsSort(sendFotherValue.join(','))
				//切换末级标签后保留 父级id
				// this.params.purchaserCatalogIds = []
				// this.params.purchaserCatalogIds = [this.params.purchaserCatalogIds[0]]
				// if (sendFotherValue.length != 0) {
				// 	sendFotherValue.forEach(num => {
				// 		this.params.purchaserCatalogIds.push(num)
				// 	})
				// } else {
				// 	this.params.purchaserCatalogIds.push(this.firstID)
				// }
        //
				// console.log('查询数据选择', this.params.purchaserCatalogIds);
				// //点击切换一级商品分类
				// this.loadData1('refresh')
				this.listScrollTop = 0
			},
			// 点击楼层商品跳转到详情页
			navToFloorItemDetail(good) {
				const id = good.goodsId;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			//详情页
			navToDetailPage(item) {
				let id = item.goodsId;
				// getApp().globalData.needRefresh = 1
				getApp().globalData.needRefresh = 0
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
			/* 设备类型确定回调 */
			typeConfirm(val) {
				console.log(val)
			},
			/* 状态点击回调 */
			stateActive(val) {
				console.log(val)
			},
			/* 排序点击回调 */
			sortActive(val) {
				console.log(val)
			},
      tabGoodListClick(index,item){
			  this.goodNameIndex = index
      },
      tabGoodListClick2(index,item){
			  this.goodListIndex = index
        this.colorAndPriceList = this.colorAndPriceLists[index]
      },
      tabGoodListClick3(index,item){
			  this.goodItemIndex = index
      },
			tabClick(val) {
				console.log(val)
				this.selectValue = val
				if(val==0){
					console.log('点击全部');
					// this.params.sortType = type
					this.saleDown = true
					this.priceDown = true
					delete this.params.sortType
					this.loadData1('refresh')
				}
				if(val==1){
					console.log('点击综合');
					// this.params.sortType = type
					this.saleDown = true
					this.priceDown = true
					delete this.params.sortType
					this.loadData1('refresh')
				}
				//点击销量情况
				if (val == 2) {
					console.log('点击销量');
					this.saleDown = !this.saleDown
					this.priceDown = true
					this.saleGrade(this.saleDown)
				}
				if (val == 3) {
					console.log('点击价格');
					this.priceDown = !this.priceDown
					this.saleDown = true
					this.priceGrade(this.priceDown)
				}
			},
			//销量的升降排序
			saleGrade(val){
				let type = val ? 21 : 20
				this.params.sortType = type
				this.loadData1('refresh')
			},
			//价格升降序排列
			priceGrade(val) {
				let type = val ? 11 : 10
				this.params.sortType = type
				this.loadData1('refresh')

			},
			//初始化params
			initParams() {
				//供应商id获取
				// this.params.purchaserId = uni.getStorageSync('deptinfo').deptId
				let iddd = ''
				uni.getStorage({
					key: 'deptinfo',
					success(e) {
						console.log('获取的值', e.data);
						iddd = e.data[0].deptId
					}
				})
				//供应商id获取
				this.params.purchaserId = iddd
				//左侧菜单了第一项id获取
				let idsStr = getApp().globalData.categoryIds;
				console.log(getApp().globalData)
				// var aaa = getApp().globalData['categoryIds'];
				// console.log('aaa',aaa);
				console.log('idsStr', idsStr);
				getApp().globalData.categoryIds = "";
				if (idsStr && idsStr != '') {
					debugger
					var ids = idsStr.split(',');
					ids.forEach(id => {
						this.params.purchaserCatalogIds.push(id);
						// this.params.searchData.push(id)
					});
					this.params.searchData = this.params.purchaserCatalogIds.join(',')
				}
				if (this.cateId !== -1) {
					debugger
					this.params.purchaserCatalogIds.push(this.cateId)
					this.params.searchData = this.params.purchaserCatalogIds.join(',')
				}
				console.log('初始化后的params', this.params);
			},
			//点击菜单切换商品内容
			async loadGoods() {
				console.log('0000000')
        let param = {
          page:1,
          limit:10
        }
				let goodsJson = await getClassPageList(param)
				// this.goodsList = goodsJson.goodsList
        console.log('goodsJson',goodsJson)
				this.lastList = goodsJson.records
        if (this.lastList.length > 0){
          this.selectId = this.lastList[0].id
          this.currentIdList = []
          this.goodsListParent = []
          this.loadGoodsSort(this.lastList[0].id)
        }else {
          this.currentIdList = []
          this.goodsListParent = []
        }

        console.log('goodsList', this.lastList)
				this.params.page += 1;
			},
      loadGoodsSort(id){
        let param = {
          classifyId: id.toString()
        }
        getOriginGoodsFindByClassifyId(param).then(res => {
          console.log('sss',res)
          // if (res.code == 0) {
            this.fatherList =res
          if (this.fatherList.length > 0){
            this.currentId = this.fatherList[0].id
            this.currentIdList.push(this.currentId)
            this.goodSortId = this.fatherList[0].id
            this.activeGoodsIndex = 0
            this.loadProtocolGoodsDetail(this.fatherList[0].id)
          }else {
            this.goodsList = []
          }
            console.log('fatherList',this.fatherList)
          // }
        })
      },
      loadProtocolGoodsDetail(id,index){
        let param = {
          // protocolGoodsId: id.toString()
          originGoodsId: id.toString()
        }
        // getProtocolGoodsDetail(param).then(res => {
        findByOriginGoodsId(param).then(res => {
          console.log('getProtocolGoodsDetail',res)

          if (res.length > 0){
            this.goodsList = res
            this.goodsListParent.push(this.goodsList)
            if (index >= 0){
              console.log('激活')
              this.$nextTick(() => {
                this.toView = 'view'+index
              })

            }

          }

          for (let i = 0; i < res.length; i++) {
            // res[i].upDownPrice
          }
          // if (res.code == 0) {
          //   this.fatherList =res
            console.log('getProtocolGoodsDetail',this.goodsList)
          // }
        })
      },
			//加载商品 ，带下拉刷新和上滑加载
			async loadData1(type = 'add', loading,status) {
				// debugger
				//没有更多直接返回
				if (type === 'add') {
					if (this.loadingType === 'nomore') {
						return;
					}
					this.loadingType = 'loading';
				} else {
					this.loadingType = 'more'
				}
				if (type === 'refresh') {
					this.params.page = 1;
				}
        if (status){
          this.purchaserCatalogIds = this.params.purchaserCatalogIds
        }
				let goodsJson = await getClassGoodLists(this.params)
				console.log('params', this.params)
				let goodsList = goodsJson.goodsList
				let total = goodsJson.total
				// this.lastList = goodsJson.purchaserCatalogList
				this.goodsLength = total
				if (type === 'refresh') {
					this.goodsList = goodsList;
				} else {
					this.goodsList = this.goodsList.concat(goodsList);
				}
				this.params.page += 1;
				console.log('现有商品数', this.goodsList.length);
				console.log('商品总数', total);
				//判断是否还有下一页，有是more  没有是nomore
				this.loadingType = this.goodsList.length < Number(total) ? 'more' : 'nomore';
				console.log('this.loadingType ', this.loadingType);
				if (type === 'refresh') {
					// uni.stopPullDownRefresh();
					if (loading === 1) {
						uni.hideLoading()
					} else {
						// uni.stopPullDownRefresh();
					}
				}
				if (this.hasLogin) {
					this.getGoodsAmount()
				}
			},
			//商品列表下拉刷新
			scrollToBottom() {
				console.log('下拉刷新');
				if (this.fatherList.length > this.activeGoodsIndex){
          this.currentId = this.fatherList[this.activeGoodsIndex].id
				  console.log('this.currentId',this.currentId)
				  console.log('this.currentIdList.indexOf(this.currentId) == -1',this.currentIdList.indexOf(this.currentId))
          this.activeGoodsIndex++
          if (this.currentIdList.indexOf(this.currentId) == -1){

            this.currentIdList.push(this.currentId)
            this.loadProtocolGoodsDetail(this.currentId)
          }

        }else {
          console.log('没有数据了');
        }

				// this.currentId
				// this.loadData1();
				// this.loadData('refresh', 1);
			},
			navToSearch(url) {
				uni.navigateTo({
					url
				})
			},
			//加载商品列表数据
			async loadCate(selectId) {
				let list = await category().then(res => res.data);
				if (list) {
					this.flist = []
					this.slist = []
					this.tlist = []
				}
				//修改一级菜单展示数据
				this.fatherList = this.toTree(list)
				console.log('this.fatherList', this.fatherList)
				list.forEach(item => {
					if (item.parentId === '0' || item.treeDepth === 0) {
						this.flist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
					} else if (item.treeDepth === 1) {
						this.slist.push(item); //没有图的是2级分类
					} else {
						this.tlist.push(item); //大于三级的分类
					}
				})
				//查询所有非一级菜单集合
				list.forEach(item => {
					if (item.parentId !== '0' && item.treeDepth !== 0) {
						this.totalList.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
					}
				})
				// console.log('总菜单', this.totalList);
				// console.log('this.flist', this.flist);
				// console.log('this.slist', this.slist);
				// console.log('this.tlist', this.tlist);
				// this.selectedId = getApp().globalData.categoryFId;
				// getApp().globalData.categoryFId = "";
				let selectedItem = {}
				if(selectId){
					console.log('selectId',selectId);
					let selectData = this.fatherList.filter(item=>item.id ==selectId )
					console.log('selectData',selectData[0]);
					selectedItem = selectData[0]

				}else{
					 selectedItem = this.flist[0];
				}
				console.log('selectedItem', selectedItem);
				// this.flist.forEach(category => {
				// 	if(category.id === this.selectedId){
				// 		selectedItem = category
				// 	}
				// });
				this.fatherList = this.toTree(list)
				this.tabtap(selectedItem);
				console.log('fatherList', this.fatherList);
				// console.log(this.flist, this.slist, this.tlist)
			},
			//生产树形结构
			toTree(data) {
				// 删除 所有 children,以防止多次调用
				data.forEach(function(item) {
					delete item.children;
				});
				// 将数据存储为 以 id 为 KEY 的 map 索引数据列
				var map = {};
				data.forEach(function(item) {
					map[item.id] = item;
				});
				//console.log(map);
				var val = [];
				data.forEach(function(item) {
					// 以当前遍历项，的parentId,去map对象中找到索引的id
					var parent = map[item.parentId];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						val.push(item);
					}
				});
				return val;
			},

			getCatalogIds(item) {
				this.jumpCatalogIds.push(item.id);
				if (item.children) {
					item.children.forEach(child => {
						this.getCatalogIds(child)
					});
				}
				// console.log('this.jumpCatalogIds',this.jumpCatalogIds);
			},
			//一级分类点击
			tabtap(item,index) {
				console.log('item',item);

        this.activeGoodsIndex = index
				// if(item == undefined){
				// 	item = this.flist[0]
				// }
				//点击返回
				// this.selectValue = 0
				// console.log('左侧一级品目', item);
				// this.jumpCatalogIds = [];
				// if(item!=undefined)this.getCatalogIds(item);
				// // console.log(this.jumpCatalogIds.join(','));
				// // 传输品目Id
				// getApp().globalData.categoryIds = this.jumpCatalogIds.join(',');
				// this.currentId = item.id;
				this.goodListIndex = 0;
        this.currentId = item.id;
        console.log('this.currentIdList.indexOf(item.id) < -1',this.currentIdList.indexOf(item.id))
        if (this.currentIdList.indexOf(item.id) == -1){
          this.currentIdList.push(item.id)
          this.loadProtocolGoodsDetail(this.currentId,index)
          // this.toView = 'view'+index
        }else {
          this.toView = 'view'+index
        }

				// this.curslist = [];
				// //取出选中一级菜单下二级菜单目录
				// this.slist.forEach(item => {
				// 	if (item.parentId === this.currentId) {
				// 		this.curslist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
				// 	}
				// });
				// console.log('二级菜单', this.curslist);
				// //遍历末级菜单
				// this.lastList = []
				// //取末级菜单
				// this.lastList = this.getAllLeaf(item.children)
				// console.log('末级菜单', this.lastList);
				// //末级菜单添加 选中select属性
				// if (this.lastList.length != 0 || this.lastList !== undefined) {
				// 	this.lastList.forEach(item => {
				// 		this.$set(item, 'select', false)
				// 	})
				// }
				// //展开一级菜单下全部商品
				// let purchaserCatalogIds = item.id
				// //增加供应商id
				// // this.params.purchaserId = "733018063826624512"
				// this.params.purchaserCatalogIds.length = 0
				// this.params.purchaserCatalogIds.push(purchaserCatalogIds)
				// this.firstID = purchaserCatalogIds
				// //点击切换一级商品分类
				// this.loadData1('refresh',0, true) // 第三个参数用来判断是否要把顶级目录id参数传给子组件，用来点击全部时回调接口
				// this.listScrollTop = 0
				// this.tabScrollTop = 0;
			},
			//递归循环查找 末级菜单
			getAllLeaf(data) {
				if (data == undefined) {
					return [];
				}
				let result = []

				function getLeaf(data) {
					data.forEach(item => {
						if (!item.children) {
							result.push(item)
						} else {
							getLeaf(item.children)
						}
					})
				}
				getLeaf(data)
				return result
			},
			//右侧栏滚动
			asideScroll(e) {
				// if (!this.sizeCalcState) {
				// 	this.calcSize();
				// }
				// let scrollTop = e.detail.scrollTop;
				// let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
				// if (tabs.length > 0) {
				// 	this.currentId = tabs[0].parentId;
				// }
				this.tabScrollTop = e.detail.scrollTop;
			},
			scroll(e) {
				// console.log('e',e);
				if (e.detail.scrollTop > 20) {
					this.showToTop = true;
					this.listScrollTop = e.detail.scrollTop;
				} else {
					this.showToTop = false;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize() {
				let h = 0;
				this.slist.forEach(item => {
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
			navToList(sid, tid) {
				uni.navigateTo({
					url: `/pages/product/list?fid=${this.currentId}&sid=${sid}&tid=${tid}`
				})
			},
      showMore(itP,inP){
        this.goodListIndex = 0
        this.goodItemIndex = 0
        let configurationList = []
        let colorAndPriceList = []
        this.originGoodsName = itP[0].originGoodsName
        let nameList =[]
        nameList.push({
          name: this.originGoodsName
        })
        this.goodNameList = nameList
        console.log('itP',itP)
        for (let i = 0; i < itP.length; i++) {
          configurationList.push({
            name:itP[i].configuration
          })
          console.log('itP[i].itemList',itP[i].itemList)
          colorAndPriceList.push(itP[i].itemList)
        }
        this.configurationList = configurationList
        console.log('colorAndPriceList',colorAndPriceList)
        this.colorAndPriceLists = colorAndPriceList
        this.colorAndPriceList = colorAndPriceList[0]
        this.supplierShow = !this.supplierShow
      },
      showDetailMore(itP,inP,item,index,index2){
        let configurationList = []
        let colorAndPriceList = []
        this.originGoodsName = itP[index].originGoodsName
        this.goodListIndex = index
        this.goodItemIndex = index2
        let nameList =[]
        nameList.push({
          name: this.originGoodsName
        })
        this.goodNameList = nameList
        for (let i = 0; i < itP.length; i++) {
          configurationList.push({
            name:itP[i].configuration
          })
          console.log('itP[i].itemList',itP[i].itemList)
          colorAndPriceList.push(itP[i].itemList)
        }
        this.configurationList = configurationList
        this.colorAndPriceLists = colorAndPriceList
        this.colorAndPriceList = colorAndPriceList[index]
        this.supplierShow = !this.supplierShow
      },
		}
	}
</script>

<style lang='scss'>
	/* 	body {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
	} */

	page,
	.content1 {
		height: 100%;

	}

	.content {
		height: 100%;
		//padding-bottom: 50px;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}

	.mp-search-box {

		position: sticky;
		left: 0;

		top: 0;
		z-index: 9999;
		width: 100%;
		height: 100rpx;

		text-align: center;
		display: flex;
		flex-direction: column;

		background-color: rgba($color: #F7F7F7, $alpha: 0.8);

		.searchBox {
			display: flex;
			align-items: center;
			padding: 10rpx;
			justify-content: space-around;
			 /* margin-top: 90rpx; */
			background-color: #E8E8EB;

			.inputBox {
				display: flex;
				background: #fff;
				height: 68rpx;
				width: 98%;
				border-radius: 5px;

				&::before {
					content: " ";
					display: inline-block;
					width: 33rpx;
					height: 33rpx;
					position: relative;
					top: 18rpx;
					left: 305rpx;
					background: url(../../static/search-icon.png) no-repeat;
					background-size: contain;
				}
			}


		}

		.ser-input {
			width: 100%;
			height: 70rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 28upx;
			color: #909090;
			border-radius: 5px;
			// background: #f0f0f0;
			// background: #fff;
		}

		.search {
			width: 40rpx;
			height: 40rpx;
			margin-top: 10rpx;
		}

		.ph {
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
		}
	}

	.left-aside {
		flex-shrink: 0;
		width: 210upx;
		height: 100%;
		background-color: #f8f8f8 100%;
		font-family: $my-newh5-family;
		/* border-right: 1px solid black; */
	}

	.rightBox {
		background: #FFFFFF 100%;
		display: flex;
		flex-direction: column;
		width: 100%;
		// padding: 0 10px 10px 10px;

		.cateBox {
			.cateTitle {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				// margin-left: 20rpx;

				.cateTop {
					flex: 1;

					.collaspeBox {
						position: sticky;
						display: flex;
						flex-direction: row;
						// justify-content: space-between;
						flex-wrap: wrap;

						.collaspeContent {
							/* width: 40rpx; */
							height: 60rpx;
							border: 1px solid $my-border-color-grey;
							border-radius: 20rpx;
						}
					}

				}
			}
		}

		.cateBoxTable {
			margin: 0 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border-top: 1rpx solid $my-border-color-grey;
			border-bottom: 1rpx solid $my-border-color-grey;

			.cate-item {
				/* flex: 1; */
				color: #D2D2D2 100%;
				font-family: Arial-regular;
				display: flex;
				align-items: center;
				height: 50rpx;

				&.current {
					color: #448AC8;
				}
			}
		}

		/* 商品列表 */
		.product-list {
			position: relative;
			display: flex;
/* 			padding-top: 16rpx;
			padding-bottom: env(safe-area-inset-bottom); */
			flex-direction: column;
			//flex-shrink: 0;
			/* width: 210upx; */
			/* height: 86%; */
			background-color: #E2E2E2;
			height: calc(100% - 70rpx - 52rpx);

			.product-item {
				display: flex;
				padding: 16rpx 10rpx;
				background-color: #fff;
				// border-radius: 10rpx;
				// margin: 0 10rpx 10rpx 10rpx;

				.left {
					width: 220rpx;
					height: 220rpx;
					border-radius: 10rpx;
					background-color: $border-color-light;
				}

				.right {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						height: 40px;
						text-align: left;
						color: $font-color-dark;
						font-size: 14px;
					}

					.money-box {
						text-align: left;

						.integral {
							display: inline-block;
							color: $uni-color-primary;
							font-size: 15px;

							&:before {
								background: url(../../static/money.png) no-repeat;
								width: 22rpx;
								height: 22rpx;
								margin-right: 4rpx;
								display: inline-block;
								content: '';
								background-size: contain;
							}

							&:after {
								margin-left: 4rpx;
								content: '积分';
								color: #909090;
								font-size: 12px;
							}
						}

						.split {
							font-size: 15px;
							color: $base-color;
						}

						.price {
							display: inline-block;
							color: $uni-color-primary;
							font-size: 15px;
						}
					}

					.bottom {
						display: flex;
						justify-content: flex-end;
						align-items: center;

						image {
							width: 80rpx;
							height: 80rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}


	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10rpx;
		width: 100%;
		min-height: 100upx;
		font-size: 14px;
		color: $font-color-base;
		text-align: center;
		position: relative;
		font-family: $my-newh5-family;

		/* border-radius: 10rpx; */
		&.active {
			color: #448AC8;
			background: #FFFFFF 100%;
			font-weight: bold;
			font-size: 14px;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 6upx;
				background-color: #448AC8;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding: 0 20upx 20upx 20upx;
	}

	.s-item {
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 13px;
		font-weight: bold;
		color: $font-color-dark;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		min-height: 30px;
		background: #fff;
		padding-top: 12upx;
		border-radius: 10rpx;
		padding-bottom: 12upx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		// width: fit-content;
		font-size: 13px;
		color: #666;
		width: 32.8%;
		padding-left: 15upx;
		position: relative;

		/* margin-bottom: 20upx; */
		.catalog-text {
			height: 35px;
		}

		image {
			width: 140upx;
			height: 140upx;
			border-radius: 10rpx;
		}
	}

  .tab {
    //padding-bottom: 20rpx;
    padding-top: 5px;
    background-color: white;
    margin-top: 4px;
    width: 250px;
    flex-wrap: wrap;
    //padding-left: 13px;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    font-family: PingFangSC-Medium;

    .tab-item {
      font-size: 13px;
      color: $font-color-dark;
      border-radius: 4px;
      padding: 4rpx 14rpx;
      background: none;
      margin-bottom: 10px;
      margin-right: 10px;
      background: #F5F5F5;
      color: #646464;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      height: 30px;
      line-height: 24px;
      &.current {
        border: 1px solid #2b85e4;
        background: #F5F5F5 ;
        color: #2b85e4;
        border-radius: 4px;
        padding: 4rpx 16rpx;
      }
    }
  }
  .my-navbar {
    position: fixed;
    top: var(--status-bar-height);
    z-index: 12;
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 14rpx 24rpx;
    justify-content: space-around;
    width: 100%;

    &>image {
      width: 26rpx;
      height: 46rpx;
    }

    .cancelBox {
      flex: 1;
      z-index: 999;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #646464;
    }

    .search-input {
      width: 600rpx;
      height: 60rpx;
      background: $my-bg-color-grey;
      border-radius: 60rpx;
      // margin-left: 24rpx;
      font-size: $my-font-size-base;

      &::before {
        content: " ";
        display: inline-block;
        width: 33rpx;
        height: 33rpx;
        position: relative;
        top: 14rpx;
        left: 20rpx;
        background: url(../../static/search-icon.png) no-repeat;
        background-size: contain;
      }

      input {
        position: relative;
        top: -30rpx;
        left: 66rpx;
        color: $my-text-color-base;
        font-size: $my-font-size-base;
      }
    }
  }
</style>
